<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <div class="indexTitle">项目管理</div>
                    <div class="contentsize">新建</div>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="addtitle">新建</div>
            <el-form ref="form" :model="form" label-width="120px" :inline="true" label-position="top" :rules="rules">
                <el-form-item label="项目名称:" style="width: 30%" prop="name">
                    <el-input v-model="form.name" placeholder="请输入项目名称" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="项目地址:" style="width: 30%" prop="address">
                    <el-input v-model="form.address" placeholder="请输入项目地址" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="开工时间:" style="width: 30%" prop="beginTime">
                    <el-date-picker
                        type="date"
                        placeholder="选择开工时间"
                        v-model="form.beginTime"
                        style="width: 100%"
                        value-format="yyyy-MM-dd"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="计划竣工时间:" style="width: 30%" prop="completionTime">
                    <el-date-picker
                        type="date"
                        placeholder="选择计划竣工时间"
                        v-model="form.completionTime"
                        style="width: 100%"
                        value-format="yyyy-MM-dd"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="乙方负责人:" style="width: 30%" prop="chargenameB">
                    <el-input v-model="form.chargenameB" placeholder="请输入乙方负责人" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="乙方负责人电话:" style="width: 30%" prop="phoneB">
                    <!-- onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" -->
                    <el-input v-model="form.phoneB" placeholder="请输入乙方负责人电话" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="乙方公司名称:" style="width: 30%" prop="company">
                    <el-input v-model="form.company" placeholder="请输入乙方公司名称" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="甲方项目负责人:" style="width: 30%" prop="chargenameA">
                    <el-input v-model="form.chargenameA" placeholder="请输入甲方项目负责人" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="甲方负责人电话:" style="width: 30%" prop="phoneA">
                    <!-- onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" -->
                    <el-input v-model="form.phoneA" placeholder="请输入甲方负责人电话" class="search-input"></el-input>
                </el-form-item>
                <!-- 是否支持多文进上传 multiple -->
                <el-upload
                    class="upload-demo"
                    action="http://125.39.179.246:8099/upFile/uploadFile"
                    :on-remove="handleRemoves"
                    :before-remove="beforeRemoves"
                    multiple
                    :on-success="handelfilesuccess"
                    :headers="myHeaders"
                    :file-list="filefileList"
                >
                    <div class="unloadTitle">附件</div>
                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                </el-upload>
                <div class="buttonCenter">
                    <el-button type="primary" @click="submitForm('ruleForm')" class="searchcolor">保存</el-button>
                    <el-button @click="cacelsubmitForm('ruleForm')">取消</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
import { projectadd } from '@/api/index';
export default {
    name: 'addproject',
    data() {
        return {
            filefileList:[],//文件列表
            fileListshandle:[],
            // 请求表头信息
            myHeaders:{
                'token':'123'
            },
            form: {
                address: '', //项目地址 ,
                beginTime: '', //开工时间 ,
                chargenameA: '', //甲方项目负责人 ,
                chargenameB: '', //乙方负责人 ,
                company: '', //乙方公司名 ,
                completionTime: '', //竣工时间 ,
                create_name: localStorage.getItem('username'), //创建人 ,
                create_name_id: localStorage.getItem('userid'), //创建人id ,
                create_time: '', //创建时间 ,
                fileinfo: '', //,
                id: '', //,
                name: '', // 项目名称 ,
                phoneA: '', //甲方负责人电话 ,
                phoneB: '', //乙方负责人电话 ,
                status_code: '', //1正常 2删除 ,
                update_name: localStorage.getItem('username'), //修改人 ,
                update_name_id: localStorage.getItem('userid'), //修改人id ,
                update_time: '' //修改时间
            },
            fileList: [],
            rules: {
                name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
                address: [{ required: true, message: '请输入项目地址', trigger: 'blur' }],
                beginTime: [{ type: 'date', required: true, message: '请选择开工时间', trigger: 'change' }],
                completionTime: [{ type: 'date', required: true, message: '请选择计划竣工时间', trigger: 'change' }],

                chargenameB: [{ required: true, message: '请输入乙方负责人', trigger: 'blur' }],
                phoneB: [
                    { required: true, message: '请输入乙方负责人电话', trigger: 'blur' },
                    // { type: 'number', message: '电话必须为数字值'}
                ],
                company: [{ required: true, message: '请输入乙方公司名称', trigger: 'blur' }],
                chargenameA: [{ required: true, message: '请输入甲方项目负责人', trigger: 'blur' }],
                phoneA: [
                    { required: true, message: '请输入甲方负责人电话', trigger: 'blur'},
                    // { type: 'number', message: '电话必须为数字值'}
                ]
            }
        };
    },
    methods: {
        // 创建
        submitForm() {
            projectadd(this.form).then((res) => {
                if (res.code == 200) {
                    this.$message.success('创建成功');
                    this.$router.push({
                        name: 'dashboard',
                        path: '/dashboard'
                    });
                } else {
                    this.$message.error('创建失败');
                }
            });

            console.log('提交确定');
        },
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
         // 文件
        handleRemoves(file, fileList) {
            console.log(fileList)
            this.fileListshandle = fileList.map((res) => {
                return res.response.data.id;
            });
            this.form.fileinfo=this.fileListshandle.toString()
            
        },
         // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file)
            console.log(fileList)
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        handelfilesuccess(response, file, fileLists) {
            console.log(fileLists)
            this.$message.success('导入成功');
            this.fileListshandle = fileLists.map((res) => {
                console.log(res.response.data)
                return res.response.data.id;
            });
            this.form.fileinfo=this.fileListshandle.toString()
        }
    }
};
</script>
<style>
.el-upload-list {
    width: 60%;
}
.el-upload--text {
    width: auto;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>
<style scoped>
.container {
    overflow: hidden;
}
.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}
.indexTitle {
    margin-bottom: 20px;
}
.contentsize {
    font-size: 18px;
    font-weight: 700;
}
.handle-box {
    overflow: hidden;
}
.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
}
.buttonCenter {
    width: 12%;
    margin: auto;
}
.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}
/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}
</style>